<style type="text/css">
.jiajian {
	border: solid 1px #e6e6e6;
	border-radius: 4px;
	width: 162px;
	overflow: hidden;
	text-align: center;
	line-height: 30px;
	margin: 0 auto;
	margin-top: 10px;
}

.jiajian .jia {
	display: block;
	text-align: center;
	width: 40px;
	float: right;
	cursor: pointer;
}

.jiajian .jian {
	display: block;
	text-align: center;
	width: 40px;
	float: left;
	cursor: pointer;
}

.jiajian input {
	width: 80px;
	float: left;
	line-height: 30px;
	height: 30px;
	border: none;
	border-right-color: currentcolor;
	border-right-style: none;
	border-right-width: medium;
	border-left-color: currentcolor;
	border-left-style: none;
	border-left-width: medium;
	text-align: center;
	border-left: 1px solid #dcdcdc;
	border-right: 1px solid #dcdcdc;
}

.layui-row .layui-col-md2 {
	min-width: 260px;
}

.footBtn {
	height: 50px !important;
	line-height: 50px;
	margin-bottom: 1px;
	text-align: center;
	cursor: pointer;
	font-size: 30px;
	background-color: #f10214;
	color: #fff;
	border-radius: 2px;
	opacity: .95;
	position: fixed;
	right: 50px;
	bottom: 100px;
	z-index: 9999;
}

.footBtn i {
	font-size: 50px;
}
</style>
<div class="layui-card">
	<div class="layui-card-header">
		<h2 class="header-title">产品领用</h2>
		<span class="layui-breadcrumb pull-right"> <a
			href="#!home_console">首页</a> <a><cite>产品领用</cite></a>
		</span>
	</div>

	<div class="layui-card-body">
		<button class="layui-btn footBtn">
			<i class="layui-icon">&#xe657;</i>
		</button>
		<div class="layui-fluid layadmin-cmdlist-fluid">
			<div class="layui-row layui-col-space30">
				<% for(stock in stocks) { %>

				<div class="layui-col-md2 layui-col-sm4">
					<div class="cmdlist-container">
						<a href="javascript:;"> <img src="${stock.product.productPic}">
						</a>
						<div class="cmdlist-text">
							<p class="info">名称：${stock.product.productName}</p>
							<p class="info">数量：${stock.productAmount}</p>

							<div class="jiajian">
								<span disabled="disabled" class="jian layui-disabled"
									onclick="amountReduce(this)">-</span> <input class="buyNum"
									stockId="${stock.id}" name="${stock.product.productName}"
									price="${stock.product.productPrice}" id="${stock.product.id}"
									initial="1" onchange="checkInitial(this);"
									oninput="value=value.replace(/[^\d]/g,'')" type="text"
									value="0"> <span class="jia" onclick="amountAdd(this)">+</span>
								<div></div>
							</div>
						</div>

					</div>
				</div>
				<% } %>

			</div>
		</div>
		<div id="asdsa" class="layui-hide">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-body"
						style="height: 400px; overflow: scroll;">
						<table class="layui-table">
							<colgroup>
								<col>
								<col>
								<col>
								<col>
							</colgroup>
							<thead>
								<tr>
									<th>产品名称</th>
									<th>产品单价（元）</th>
									<th>领用数量</th>
								</tr>
							</thead>
							<tbody id="orderList"></tbody>

						</table>
					</div>
					<div style="widh: 100%; text-align: center">

						<button id="use" class="layui-btn layui-btn-lg"
							style="margin: 20px 0; background: #FF5722">领用</button>
					</div>

				</div>
			</div>
		</div>

		<link rel="stylesheet" href="${ctxPath }/assets/css/template.css" />

		<script>
			function amountAdd(dom) {
				//var kucun = parseFloat($(dom).prev().attr("kucun"));
				var initial = parseFloat($(dom).prev().attr("initial"));
				var parent = parseFloat($(dom).prev().val());
				if (parent == 0) {
					$(dom).prev().prev().attr("disabled", false).removeClass(
							"layui-disabled");
				}
				parent = parent + initial;
/* 				if (parent > kucun) {
					layer.msg('超出库存数量！')
					return;
				} */
				$(dom).prev().val(parent);
			}
			function amountReduce(dom) {
				var parent = parseFloat($(dom).next().val());
				var initial = parseFloat($(dom).next().attr("initial"));
				parent = parent - initial;
				if (parent < 0) {
					$(dom).attr("disabled", true).addClass("layui-disabled");
					return;
				}
				$(dom).next().val(parent);
			}

			function checkInitial(dom) {
				var value = parseFloat($(dom).val());
				if (isNaN(value)) {
					layer.msg('输入数量有误，请查看商品数量！')
					$(dom).val(0);
				}else{
					$(dom).prev().attr("disabled", false).removeClass(
					"layui-disabled");
				}
				//var kucun = parseFloat($(dom).attr("kucun"));
				/* var initial = parseFloat($(dom).attr("initial"));
				if (value % initial != 0) {
					layer.msg('输入数量有误，请输入起购数量的整数倍！')
					$(dom).val(0);
				} */
				/* if (value > kucun) {
					layer.msg('超出库存数量，请重新输入！')
					$(dom).val(0);
				} */
			}


            layui.use([ 'admin', 'laypage', 'layer', 'util' ],function() {
								var $ = layui.$, admin = layui.admin, laypage = layui.laypage, layer = layui.layer, util = layui.util;
								var data_list= new Array();
								// 添加按钮点击事件
						        $('.footBtn').click(function () {
						        	$("#orderList").empty();
						        	data_list= new Array();
									var data = document.getElementsByClassName("buyNum");
									var totalNum = 0;
									var totalPrice = 0;
									for (var i = 0; i < data.length; i++) {
										if($(data[i]).val() > 0){
											
											var m={'productId':$(data[i]).attr("id"),'quantity':$(data[i]).val(),'stockId':$(data[i]).attr("stockId")};
											data_list.push(m);
											var itemPrice = parseFloat($(data[i]).attr("price")) * parseFloat($(data[i]).val());
											totalNum += parseFloat($(data[i]).val());
											totalPrice += itemPrice;
											$("#orderList").append(
															"<tr> <td>"+ $(data[i]).attr("name")
																	+ "</td> <td>"
																	+ $(data[i]).attr("price")
																	+ "</td> <td>"
																	+ $(data[i]).val()
																	+ "</td> </tr>");
											
										}
										}
									if(totalPrice == 0){
										$("#orderList").empty();
										$("#orderList").append("<tr> <td colspan='4' style='text-align:center'>订单暂无数据！</td></tr>");
										$(".layui-btn-lg").hide();
									}else{
										$("#orderList").append(
												"<tr> <td colspan='2' style='text-align:center'>合计</td><td>"
														+ totalNum
														+ "</td></tr>");
										$(".layui-btn-lg").show();
									}
									
									active.test15();
									
						        });
						        //下单
						        $(document).on('click','#makeOrder',function() {
						        	layer.closeAll('loading');
						        	//没起作用
                                    $("#makeOrder").attr('disabled', true);
						        	var url = 'service/purchase/order';
						        	var data = {"orderList":data_list};
						        	admin.req(url, data, function(data) {
										layer.closeAll('loading');
										if (data.code == 1) {
											layer.msg(data.msg, {
												icon : 1
											});
										} else {
											layer.msg(data.msg, {
												icon : 2
											});
										}
                                        setTimeout(function(){
                                            location.reload();
                                        }, 2000 );
									}, "post");
						        });
								//触发事件
								var active = {
									test15 : function() {
										layer.open({
											title : '领用清单',
											type : 1,
											area : '60%',
											offset : '20%',
											skin : 'layui-layer-rim',
											content : $("#asdsa").prop(
													"innerHTML")
										});
									}
								};
								
								//产品销售
						        $(document).on('click','#sale',function() {
						        	var data = data_list;
						        	showSaleModel(data);
						        });
								
						        // 显示表单弹窗
				                var showSaleModel = function (data) {
				                    var shopId = $("#shopInfo").attr("data");
				                    admin.popupCenter({
				                        area: '35%',
				                        title: "产品销售",
				                        path: "service/productSale/sale?shopId=" + shopId + "&orderList=" + JSON.stringify(data),
				                        finish: function () {
				                            location.reload();
				                        }
				                    });
				                };
								
						        //产品领用
						        $(document).on('click','#use',function() {
						        	    var parm = {
		                                    type: 4,
		                                    shopId: $("#shopInfo").attr("data"),
		                                    orderDetail: data_list
		                                };
				                			 layer.confirm('确认要进行领用操作么？', {
				                				  btn: ['取消', '确定'] //可以无限个按钮
				    
				                				}, function(index){
				                					layer.close(layer.index); 
				                				}, function(index, layero){
				                					admin.req("service/productUse/use", parm, function(data) {
				                                        layer.closeAll('loading');
				                                        if (data.code == 1) {
				                                            layer.msg( data.data,{
				                                                        icon : 1,
				                                                        time : 1000
				                                                    },
				                                                    function() {
				                                                    	location.reload();
				                                                    })
				                                            
				                                        } else {
				                                            layer.msg(data.data, {
				                                                icon : 2
				                                            });
				                                        }
				                                    }, "post");
				                				}); 
				                		 })
							});
		</script>